<template>
  <div class="InspectionPointsSetting">
    <div class="filter">
      <el-form :model="filterForm" :rules="filterRules" ref="filterForm" label-width="120px">
        <el-form-item label="设备区域:">
          <div class="el_consist" :style="'height:' + (d_a_CheckMore ? 'auto' : '31px')">
            <el-checkbox
              class="allCheckBox"
              :label="0"
              name="type"
              :indeterminate="d_a_isIndeterminate"
              v-model="d_a_CheckAll"
              @change="handle_d_a_CheckAllChange"
            >全部</el-checkbox>
            <el-checkbox-group
              v-model="filterForm.deviceAreasCheckList"
              @change="handleCheckChange"
            >
              <el-checkbox
                v-for="item in deviceAreasList"
                :key="item.id"
                :label="item.id"
                name="type"
              >{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <el-checkbox
            v-if="deviceAreasList.length > nRowCount"
            class="moreCheckBox"
            label="all"
            name="type"
            v-model="d_a_CheckMore"
            @change="handleMoreChange"
          >查看更多</el-checkbox>
        </el-form-item>
        <el-form-item label="设备类型:">
          <div class="el_consist" :style="'height:' + (d_t_CheckMore ? 'auto' : '31px')">
            <el-checkbox
              class="allCheckBox"
              :label="0"
              name="type"
              :indeterminate="d_t_isIndeterminate"
              v-model="d_t_CheckAll"
              @change="handle_d_t_CheckAllChange"
            >全部</el-checkbox>
            <el-checkbox-group v-model="filterForm.deviceTypeCheckList" @change="handleCheckChange">
              <el-checkbox
                v-for="item in deviceTypeList"
                :key="item.id"
                :label="item.id"
                name="type"
              >{{item.displayName}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <el-checkbox
            v-if="deviceTypeList.length > nRowCount"
            class="moreCheckBox"
            label="all"
            name="type"
            v-model="d_t_CheckMore"
            @change="handleMoreChange"
          >查看更多</el-checkbox>
        </el-form-item>
        <el-form-item label="识别类型:">
          <div class="el_consist" :style="'height:' + (r_t_CheckMore ? 'auto' : '31px')">
            <el-checkbox
              class="allCheckBox"
              :label="0"
              name="type"
              :indeterminate="r_t_isIndeterminate"
              v-model="r_t_CheckAll"
              @change="handle_r_t_CheckAllChange"
            >全部</el-checkbox>
            <el-checkbox-group
              v-model="filterForm.recognitionTypeCheckList"
              @change="handleCheckChange"
            >
              <el-checkbox
                v-for="item in recognitionTypeList"
                :key="item.id"
                :label="item.id"
                name="type"
              >{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <el-checkbox
            v-if="recognitionTypeList.length > nRowCount"
            class="moreCheckBox"
            label="all"
            name="type"
            v-model="r_t_CheckMore"
            @change="handleMoreChange"
          >查看更多</el-checkbox>
        </el-form-item>
        <el-form-item label="表计类型:">
          <div class="el_consist" :style="'height:' + (m_t_CheckMore ? 'auto' : '31px')">
            <el-checkbox
              class="allCheckBox"
              :label="0"
              name="type"
              :indeterminate="m_t_isIndeterminate"
              v-model="m_t_CheckAll"
              @change="handle_m_t_CheckAllChange"
            >全部</el-checkbox>
            <el-checkbox-group v-model="filterForm.meterTypeCheckList" @change="handleCheckChange">
              <el-checkbox
                v-for="item in meterTypeList"
                :key="item.id"
                :label="item.id"
                name="type"
              >{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <el-checkbox
            v-if="meterTypeList.length > nRowCount"
            class="moreCheckBox"
            label="all"
            name="type"
            v-model="m_t_CheckMore"
            @change="handleMoreChange"
          >查看更多</el-checkbox>
        </el-form-item>
        <el-form-item label="设备外观类型:">
          <div class="el_consist" :style="'height:' + (d_a_t_CheckMore ? 'auto' : '31px')">
            <el-checkbox
              class="allCheckBox"
              :label="0"
              name="type"
              :indeterminate="d_a_t_isIndeterminate"
              v-model="d_a_t_CheckAll"
              @change="handle_d_a_t_CheckAllChange"
            >全部</el-checkbox>
            <el-checkbox-group
              v-model="filterForm.deviceAppearanceTypeCheckList"
              @change="handleCheckChange"
            >
              <el-checkbox
                v-for="item in deviceAppearanceTypeList"
                :key="item.id"
                :label="item.id"
                name="type"
              >{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <el-checkbox
            v-if="deviceAppearanceTypeList.length > nRowCount"
            class="moreCheckBox"
            label="all"
            name="type"
            v-model="d_a_t_CheckMore"
            @change="handleMoreChange"
          >查看更多</el-checkbox>
        </el-form-item>
        <el-form-item label="启用状态:">
          <el-select
            size="mini"
            clearable
            placeholder="请选择"
            v-model="filterForm.isUse"
            @change="handleUseChange"
          >
            <el-option
              v-for="item in useList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <div class="operation">
          <el-form-item>
            <el-input class="yd-input" v-model="queryStr" maxlength="15"></el-input>
          </el-form-item>
          <el-button class="but-query" type="text" size="medium" @click="handleQuery">
            <i class="query-icon"></i>查询
          </el-button>
          <el-button class="but-add" type="text" size="medium" @click="handleAdd">
            <i class="add-icon"></i>添加
          </el-button>
          <el-button class="but-modify" type="text" size="medium" @click="handleModify">
            <i class="modify-icon"></i>修改
          </el-button>
          <el-button class="but-remove" type="text" size="medium" @click="handleRemove">
            <i class="remove-icon"></i>删除
          </el-button>
          <el-button class="but-enable" type="text" size="medium" @click="handleEnable">
            <i class="enable-icon"></i>启用
          </el-button>
          <el-button class="but-disable" type="text" size="medium" @click="handleDisable">
            <i class="disable-icon"></i>禁用
          </el-button>
          <el-button class="but-reset" type="text" size="medium" @click="handleReset">
            <i class="reset-icon"></i>重置
          </el-button>
          <!-- <el-button class="but-export" type="text" size="medium" @click="handleExport">
            <i class="export-icon"></i>导出
          </el-button>-->
        </div>
      </el-form>
    </div>
    <div class="content">
      <div class="content-left">
        <div class="left-head">设备树</div>
        <div class="tree-list">
          <Tree-List
            ref="TreeList"
            :data="allDeviceTreeList"
            :showIcon="true"
            :showState="true"
            @vtl_nodeClick="TreeItemCheck"
            @vtl_nodeLabelClick="TreeItemCheck"
            @vtl_dataChange="treeDataChange"
            :activedDisabled="true"
          ></Tree-List>
        </div>
      </div>
      <div class="content-right">
        <div class="right-head">点位编制列表</div>
        <div class="content-list">
          <el-table
            ref="pointsTable"
            :data="showPointsList"
            border
            size="mini"
            class="el-table-redefine"
            style="width: 100%"
            height="100%"
            :row-class-name="tableRowClassName"
            :row-style="tableRowStyle"
            @select="handleSelect"
            @selection-change="handleSelectionChange"
            @row-click="handleClick"
          >
            <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
            <el-table-column type="selection" align="center" width="50"></el-table-column>
            <el-table-column prop="substation.name" label="变电站名称"></el-table-column>
            <el-table-column prop="interval.name" label="间隔名称"></el-table-column>
            <el-table-column prop="area.name" label="设备区域"></el-table-column>
            <el-table-column prop="subclassDevice.name" label="小类设备"></el-table-column>
            <el-table-column prop="device.deviceTypeId" label="设备类型">
              <template slot-scope="scope">
                <span>{{getDevicesTypeStr(scope.row.device.deviceTypeId)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="point.id" label="点位标识">
              <template slot-scope="scope">
                <span>{{getPointsIdentifyStr(scope.row.point.id)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="point.name" label="点位名称"></el-table-column>
            <el-table-column prop="point.reconTypeId" label="识别类型">
              <template slot-scope="scope">
                <span>{{getRecognitionTypeStr(scope.row.point.reconTypeId)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="point.meterTypeId" label="表计类型">
              <template slot-scope="scope">
                <span>{{getMeterTypeStr(scope.row.point.meterTypeId)}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-area">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper, slot"
            :page-sizes="[20, 50, 100, 300]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="pointsTotal"
            :page-size="pointsQuery.size"
            :current-page="pointsQuery.page"
          >
            <el-button type="text" size="mini">前往</el-button>
          </el-pagination>
        </div>
      </div>
    </div>
    <Points-Edit
      ref="PointsEdit"
      :data="pointEditRowData"
      :tree="allDeviceTreeList"
      :substation="selectedSubstation"
      :area="selectedArea"
      :interval="selectedInterval"
      :subclassDevice="selectedSubclassDevice"
      :device="selectedDevice"
      :point="selectedPoint"
      v-on:listenToChildEvent="showMsgFromChild"
    ></Points-Edit>
  </div>
</template>
<script>
import {
  devicesAreas,
  devicesTypesList,
  reconTypesList,
  meterTypesList,
  faceTypesList,
  pointsList,
  pointsAdd,
  pointsUpdate,
  pointsDelete,
  pointsDetail,
  pointsTree,
  inspectTypeChoosesDefaultChecks,
  robotParams,
  postOperationLogs
} from "@/api/apiManagement";

import PointsEdit from "./components/PointsEdit";
import { constants } from "zlib";
import TreeList from "@/components/TreeList";

export default {
  components: { PointsEdit, TreeList },

  data() {
    return {
      robot_id: null,
      //
      substationName: "",
      //
      queryStr: "",
      //
      allDeviceTreeList: [],
      //
      useList: [
        {
          value: 0,
          label: "禁用"
        },
        {
          value: 1,
          label: "启用"
        }
      ],
      //
      deviceAreasList: [],
      deviceTypeList: [],
      recognitionTypeList: [],
      meterTypeList: [],
      deviceAppearanceTypeList: [],
      //
      nRowCount: 0,
      //
      d_a_isIndeterminate: false,
      d_a_CheckAll: false,
      d_a_CheckMore: false,
      d_t_isIndeterminate: false,
      d_t_CheckAll: false,
      d_t_CheckMore: false,
      r_t_isIndeterminate: false,
      r_t_CheckAll: false,
      r_t_CheckMore: false,
      m_t_isIndeterminate: false,
      m_t_CheckAll: false,
      m_t_CheckMore: false,
      d_a_t_isIndeterminate: false,
      d_a_t_CheckAll: false,
      d_a_t_CheckMore: false,
      //
      filterForm: {
        deviceAreasCheckList: [],
        deviceTypeCheckList: [],
        recognitionTypeCheckList: [],
        meterTypeCheckList: [],
        deviceAppearanceTypeCheckList: [],
        isUse: 1
      },
      filterRules: {},
      //
      pointEditRowData: {},
      selectedSubstation: {},
      selectedArea: {},
      selectedInterval: {},
      selectedSubclassDevice: {},
      selectedDevice: {},
      selectedPoint: {},
      //
      pointsList: [],
      operatePointsList: [],
      showPointsList: [],
      tableSelection: null,
      pointsTotal: 0,
      pointsQuery: {
        page: 1,
        size: 20
      },
      rosObj: {
        ip: "",
        port: ""
      }
    };
  },
  watch: {
    "filterForm.deviceAreasCheckList": function(val, oldVal) {
      let checkedCount = val.length;
      this.d_a_CheckAll = checkedCount === this.deviceAreasList.length;
      this.d_a_isIndeterminate =
        checkedCount > 0 && checkedCount < this.deviceAreasList.length;
    },
    "filterForm.deviceTypeCheckList": function(val, oldVal) {
      let checkedCount = val.length;
      this.d_t_CheckAll = checkedCount === this.deviceTypeList.length;
      this.d_t_isIndeterminate =
        checkedCount > 0 && checkedCount < this.deviceTypeList.length;
    },
    "filterForm.recognitionTypeCheckList": function(val, oldVal) {
      let checkedCount = val.length;
      this.r_t_CheckAll = checkedCount === this.recognitionTypeList.length;
      this.r_t_isIndeterminate =
        checkedCount > 0 && checkedCount < this.recognitionTypeList.length;
    },
    "filterForm.meterTypeCheckList": function(val, oldVal) {
      let checkedCount = val.length;
      this.m_t_CheckAll = checkedCount === this.meterTypeList.length;
      this.m_t_isIndeterminate =
        checkedCount > 0 && checkedCount < this.meterTypeList.length;
    },
    "filterForm.deviceAppearanceTypeCheckList": function(val, oldVal) {
      let checkedCount = val.length;
      this.d_a_t_CheckAll =
        checkedCount === this.deviceAppearanceTypeList.length;
      this.d_a_t_isIndeterminate =
        checkedCount > 0 && checkedCount < this.deviceAppearanceTypeList.length;
    }
  },
  computed: {},
  created() {
    this.robot_id = localStorage.getItem("ydRobot_id");
    this.getRobotParams({
      page: 1,
      size: 0,
      robotId: this.robot_id,
      type: 3
    });
    // 设备区域
    this.getDevicesAreas();
    // 设备类型
    this.getDevicesTypesList();
    // 识别类型
    this.getReconTypesList();
    // 表计类型
    this.getMeterTypesList();
    // 设备外观类型
    this.getFaceTypeList();
    // // 巡检类型默认配置
    // this.getInspectTypeChoosesDefaultChecks();
    // 点位树
    this.getPointsTree();
  },
  mounted() {
    this.nRowCount =
      document.getElementsByClassName("el_consist")[0].clientWidth / 251;
    // 监听窗口大小
    window.onresize = () => {
      this.nRowCount =
        document.getElementsByClassName("el_consist")[0].clientWidth / 251;
    };
  },
  methods: {
    /**
     * 该方法用于将有父子关系的数组转换成树形结构的数组
     * 接收一个具有父子关系的数组作为参数
     * 返回一个树形结构的数组
     */
    translateArrayToTree(data) {
      let tempData = data;
      //没有父节点的数据
      let parent = data.filter(item => {
        if (item.parentId == "undefined" || item.parentId == null) {
          return true;
        } else {
          if (tempData.some(it => it.id === item.parentId)) {
            return false;
          } else {
            return true;
          }
        }
      });
      //有父节点的数据
      let children = data.filter(item => {
        if (item.parentId !== "undefined" && item.parentId != null) {
          if (tempData.some(it => it.id === item.parentId)) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      });
      //定义转换方法的具体实现
      let translator = (parent, children) => {
        //遍历父节点数据
        parent.forEach(parentItem => {
          //遍历子节点数据
          children.forEach((childrenItem, index) => {
            //此时找到父节点对应的一个子节点
            if (parentItem.id === childrenItem.parentId) {
              //对子节点数据进行深复制，这里只支持部分类型的数据深复制，对深复制不了解的童靴可以先去了解下深复制
              let temp = JSON.parse(JSON.stringify(children));
              //让当前子节点从temp中移除，temp作为新的子节点数据，这里是为了让递归时，子节点的遍历次数更少，如果父子关系的层级越多，越有利
              temp.splice(index, 1);
              //让当前子节点作为唯一的父节点，去递归查找其对应的子节点
              translator([childrenItem], temp);
              //把找到子节点放入父节点的children属性中
              typeof parentItem.children !== "undefined" &&
              parentItem.children !== null
                ? parentItem.children.push(childrenItem)
                : (parentItem.children = [childrenItem]);
            }
          });
        });
      };
      //调用转换方法
      translator(parent, children);
      //返回最终的结果
      return parent;
    },
    //
    filterTree() {
      this.$refs.TreeList.vtl_nodesFilter({
        deviceAreasList: this.filterForm.deviceAreasCheckList,
        deviceTypeList: this.filterForm.deviceTypeCheckList,
        recognitionTypeList: this.filterForm.recognitionTypeCheckList,
        meterTypeList: this.filterForm.meterTypeCheckList,
        deviceAppearanceTypeList: this.filterForm.deviceAppearanceTypeCheckList,
        useList: [this.filterForm.isUse],
        pointType: []
      });
      // 获取过滤后的节点。
      var tempList = this.$refs.TreeList.vtl_getLeafNodes();
      this.operatePointsList = [];
      for (let i = 0, len = this.pointsList.length; i < len; i++) {
        let item = this.pointsList[i];
        var isExit = false;
        for (let j = 0, t_len = tempList.length; j < t_len; j++) {
          if (tempList[j].id === item.point.id) {
            this.operatePointsList.push(item);
            tempList.splice(j, 1);
            break;
          }
        }
      }
      this.paginationSet();
    },
    filterPointsList(data) {
      var result = [];
      _search(data, []);
      return result;

      function _search(nodes, path) {
        if (!nodes || nodes.length <= 0) {
          var obj = {};
          for (var item in path) {
            Object.assign(obj, path[item]);
          }
          return result.push(obj);
        }
        for (let i = 0; i < nodes.length; i++) {
          let node = nodes[i];
          if (node.modelLevel) {
            if (node.modelLevel === 1000) {
              path.push({ substation: node });
            }
            if (node.modelLevel === 1010) {
              path.push({ area: node });
            }
            if (node.modelLevel === 1100) {
              path.push({ interval: node });
            }
            if (node.modelLevel === 1150) {
              path.push({ subclassDevice: node });
            }
            if (node.modelLevel === 1200) {
              path.push({ device: node });
            }
          } else {
            path.push({ point: node });
          }

          if (node.children) {
            _search(node.children, path);
          } else {
            _search(node.points, path);
          }
          path.pop();
        }
      }
    },
    //
    filterCondition(node, points) {
      let arrRes = [];
      let rev = node => {
        node.map(item => {
          if (item.modelLevel) {
            if (item.modelLevel === 1010) {
              if (points.some(it => it === item.id)) {
                this.filterForm.deviceAreasCheckList.push(item.id);
              }
            }
            if (item.modelLevel === 1200) {
              if (points.some(it => it === item.id)) {
                this.filterForm.deviceTypeCheckList.push(item.deviceTypeId);
              }
            }
          }
          if (item.children) {
            rev(item.children, points);
          } else {
            if (item.points) {
              item.points = item.points.map(pointItem => {
                if (points.some(it => it === pointItem.id)) {
                  if (
                    !this.filterForm.recognitionTypeCheckList.some(
                      t => t === pointItem.reconTypeId
                    )
                  ) {
                    this.filterForm.recognitionTypeCheckList.push(
                      pointItem.reconTypeId
                    );
                  }
                  if (
                    !this.filterForm.meterTypeCheckList.some(
                      t => t === pointItem.meterTypeId
                    )
                  ) {
                    this.filterForm.meterTypeCheckList.push(
                      pointItem.meterTypeId
                    );
                  }
                  if (
                    !this.filterForm.deviceAppearanceTypeCheckList.some(
                      t => t === pointItem.faceTypeId
                    )
                  ) {
                    this.filterForm.deviceAppearanceTypeCheckList.push(
                      pointItem.faceTypeId
                    );
                  }
                }
                return pointItem;
              });
              rev(item.points, points);
            } else {
              //
            }
          }
          return item;
        });
      };
      arrRes = rev(node);
    },
    paginationSet() {
      this.pointsTotal = this.operatePointsList.length;
      this.pointsQuery.page = 1;
      this.pointsQuery.size = 20;

      this.setShowPointList();
    },
    setShowPointList() {
      let totalPage = parseInt(this.pointsTotal / this.pointsQuery.size);
      let actualTotalPage =
        this.pointsTotal % this.pointsQuery.size === 0
          ? totalPage
          : totalPage + 1;
      let actualCurrentPage =
        actualTotalPage > this.pointsQuery.page
          ? this.pointsQuery.page
          : actualTotalPage;
      this.showPointsList = this.operatePointsList.slice(
        (actualCurrentPage - 1) * this.pointsQuery.size,
        actualCurrentPage * this.pointsQuery.size
      );
    },
    // 设备区域
    getDevicesAreas() {
      devicesAreas()
        .then(response => {
          if (response) {
            this.deviceAreasList = response;
          }
        })
        .catch(() => {});
    },
    // 设备类型
    getDevicesTypesList() {
      devicesTypesList()
        .then(response => {
          if (response.list) {
            this.deviceTypeList = response.list.filter(item => {
              return parseInt(item.name) >= 2000;
            });
          }
        })
        .catch(() => {});
    },
    // 识别类型
    getReconTypesList() {
      reconTypesList()
        .then(response => {
          if (response.list) {
            this.recognitionTypeList = response.list;
          }
        })
        .catch(() => {});
    },
    // 表计类型
    getMeterTypesList() {
      meterTypesList()
        .then(response => {
          if (response.list) {
            this.meterTypeList = response.list;
          }
        })
        .catch(() => {});
    },
    // 设备外观类型
    getFaceTypeList() {
      faceTypesList()
        .then(response => {
          if (response.list) {
            this.deviceAppearanceTypeList = response.list;
          }
        })
        .catch(() => {});
    },
    // 巡检类型默认配置
    getInspectTypeChoosesDefaultChecks() {
      inspectTypeChoosesDefaultChecks({
        inspectId: 1
      }).then(response => {
        if (response) {
          for (var i = 0, len = response.length; i < len; i++) {
            if (response[i].inspectTypeId === 1) {
              if (response[i].chooseType === 0) {
                if (
                  !this.filterForm.deviceAreasCheckList.some(
                    item => item === response[i].chooseId
                  )
                ) {
                  this.filterForm.deviceAreasCheckList.push(
                    response[i].chooseId
                  );
                }
              }
              if (response[i].chooseType === 1) {
                if (
                  !this.filterForm.deviceTypeCheckList.some(
                    item => item === response[i].chooseId
                  )
                ) {
                  this.filterForm.deviceTypeCheckList.push(
                    response[i].chooseId
                  );
                }
              }
              if (response[i].chooseType === 2) {
                if (
                  !this.filterForm.recognitionTypeCheckList.some(
                    item => item === response[i].chooseId
                  )
                ) {
                  this.filterForm.recognitionTypeCheckList.push(
                    response[i].chooseId
                  );
                }
              }
              if (response[i].chooseType === 3) {
                if (
                  !this.filterForm.meterTypeCheckList.some(
                    item => item === response[i].chooseId
                  )
                ) {
                  this.filterForm.meterTypeCheckList.push(response[i].chooseId);
                }
              }
              if (response[i].chooseType === 4) {
                if (
                  !this.filterForm.deviceAppearanceTypeCheckList.some(
                    item => item === response[i].chooseId
                  )
                ) {
                  this.filterForm.deviceAppearanceTypeCheckList.push(
                    response[i].chooseId
                  );
                }
              }
            }
          }
        }
        this.getPointsTree();
      });
    },
    // 点位树
    getPointsTree() {
      pointsTree()
        .then(response => {
          if (response) {
            this.allDeviceTreeList = response;

            // 获取所有节点
            this.pointsList = this.filterPointsList(response).filter(item => {
              if (item.point) {
                return true;
              } else {
                return false;
              }
            });
            this.$refs.TreeList.vtl_nodesSearch({ str: this.queryStr });
          }
        })
        .catch(() => {});
    },
    getPointsIdentifyStr(id) {
      var str = "";
      str = id;
      if (id.toString().indexOf("point_") != -1) {
        str = id.substring(6, id.length);
      }
      return str;
    },
    getDevicesTypeStr(id) {
      var str = "";
      if (this.deviceTypeList && this.deviceTypeList.length > 0) {
        for (var i = 0, len = this.deviceTypeList.length; i < len; i++) {
          if (this.deviceTypeList[i].id === id) {
            str = this.deviceTypeList[i].displayName;
          }
        }
      }
      return str;
    },
    getRecognitionTypeStr(id) {
      var str = "";
      if (this.recognitionTypeList && this.recognitionTypeList.length > 0) {
        for (var i = 0, len = this.recognitionTypeList.length; i < len; i++) {
          if (this.recognitionTypeList[i].id === id) {
            str = this.recognitionTypeList[i].name;
          }
        }
      }
      return str;
    },
    getMeterTypeStr(id) {
      var str = "";
      if (this.meterTypeList && this.meterTypeList.length > 0) {
        for (var i = 0, len = this.meterTypeList.length; i < len; i++) {
          if (this.meterTypeList[i].id === id) {
            str = this.meterTypeList[i].name;
          }
        }
      }
      return str;
    },
    handle_d_a_CheckAllChange(val) {
      this.filterForm.deviceAreasCheckList = val
        ? this.deviceAreasList.map(item => {
            return item.id;
          })
        : [];

      this.filterTree();
    },
    //
    handle_d_t_CheckAllChange(val) {
      this.filterForm.deviceTypeCheckList = val
        ? this.deviceTypeList.map(item => {
            return item.id;
          })
        : [];

      this.filterTree();
    },
    //
    handle_r_t_CheckAllChange(val) {
      this.filterForm.recognitionTypeCheckList = val
        ? this.recognitionTypeList.map(item => {
            return item.id;
          })
        : [];

      this.filterTree();
    },
    //
    handle_m_t_CheckAllChange(val) {
      this.filterForm.meterTypeCheckList = val
        ? this.meterTypeList.map(item => {
            return item.id;
          })
        : [];

      this.filterTree();
    },
    //
    handle_d_a_t_CheckAllChange(val) {
      this.filterForm.deviceAppearanceTypeCheckList = val
        ? this.deviceAppearanceTypeList.map(item => {
            return item.id;
          })
        : [];

      this.filterTree();
    },
    //
    handleCheckChange(val) {
      this.filterTree();
    },
    //
    handleMoreChange(val) {
      //
    },
    //
    handleUseChange(val) {
      this.filterTree();
    },
    filterSelectedItem(data) {
      this.selectedSubstation = {};
      this.selectedArea = {};
      this.selectedInterval = {};
      this.selectedSubclassDevice = {};
      this.selectedDevice = {};
      this.selectedPoint = {};
      this.pointEditRowData = {};
      //
      let rev = node => {
        if (!node) return;
        if (node.modelLevel) {
          if (node.modelLevel === 1000) {
            this.selectedSubstation = node;
          }
          if (node.modelLevel === 1010) {
            this.selectedArea = node;
          }
          if (node.modelLevel === 1100) {
            this.selectedInterval = node;
          }
          if (node.modelLevel === 1150) {
            this.selectedSubclassDevice = node;
          }
          if (node.modelLevel === 1200) {
            this.selectedDevice = node;
          }
        } else {
          this.selectedPoint = node;
        }
        if (node.parentId) {
          rev(this.$refs.TreeList.vtl_getNode({ id: node.parentId }));
        }
      };
      rev(data);
    },
    //
    handleQuery() {
      this.$refs.TreeList.vtl_nodesSearch({ str: this.queryStr });
      this.filterTree();
    },
    handleAdd() {
      //
      let node = this.$refs.TreeList.vtl_getCurrentNode();
      if (node) {
        this.filterSelectedItem(node);
      }

      this.$refs.PointsEdit.isShowDia(true, false);
    },
    handleModify() {
      if (this.tableSelection) {
        let temp = this.$refs.TreeList.vtl_getNode({
          id: this.tableSelection.point.id
        });
        this.filterSelectedItem(temp);
        this.pointEditRowData = this.tableSelection;
        this.$refs.PointsEdit.isShowDia(true, true);
      } else {
        this.$message({
          message: "请选择点位后进行编辑!"
        });
      }
    },
    handleRemove() {
      if (this.tableSelection) {
        this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            var point_id = this.tableSelection.point.id.substring(
              6,
              this.tableSelection.point.id.length
            );
            pointsDelete({}, point_id)
              .then(response => {
                this.setOperationLogs(
                  "删除-巡检点位设置-" + this.tableSelection.point.name
                );
                this.dbTableUpdatePub({
                  table_id: 3
                });
                //
                this.pointStatusPub({
                  robotId: parseInt(this.robot_id),
                  id: parseInt(point_id),
                  pointId: -1,
                  status: 2
                });
                // // 巡检类型默认配置
                // this.getInspectTypeChoosesDefaultChecks();
                // 点位树
                this.getPointsTree();
                //
                this.$message({
                  message: "删除成功!",
                  type: "success"
                });
              })
              .catch(() => {});
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      } else {
        this.$message({
          message: "请选择点位后进行编辑!"
        });
      }
    },
    handleEnable() {
      if (this.tableSelection) {
        pointsUpdate(
          { isUse: 1 },
          this.tableSelection.point.id.substring(
            6,
            this.tableSelection.point.id.length
          )
        )
          .then(response => {
            this.setOperationLogs(
              "启用-巡检点位设置-" + this.tableSelection.point.name
            );
            this.dbTableUpdatePub({
              table_id: 3
            });
            this.getPointsTree();
            this.$message({
              message: "启用成功!",
              type: "success"
            });
          })
          .catch(() => {});
      } else {
        this.$message({
          message: "请选择点位后进行编辑!"
        });
      }
    },
    handleDisable() {
      if (this.tableSelection) {
        pointsUpdate(
          { isUse: 0 },
          this.tableSelection.point.id.substring(
            6,
            this.tableSelection.point.id.length
          )
        )
          .then(response => {
            this.setOperationLogs(
              "禁用-巡检点位设置-" + this.tableSelection.point.name
            );
            this.dbTableUpdatePub({
              table_id: 3
            });
            this.getPointsTree();
            this.$message({
              message: "禁用成功!",
              type: "success"
            });
          })
          .catch(() => {});
      } else {
        this.$message({
          message: "请选择点位后进行编辑!"
        });
      }
    },
    handleReset() {
      this.filterForm.deviceAreasCheckList = [];
      this.filterForm.deviceTypeCheckList = [];
      this.filterForm.recognitionTypeCheckList = [];
      this.filterForm.meterTypeCheckList = [];
      this.filterForm.deviceAppearanceTypeCheckList = [];
      this.filterForm.isUse = 1;
      this.$refs.TreeList.vtl_nodesSearch({ str: "" });
      this.filterTree();
      this.$refs.pointsTable.clearSelection();
    },
    // handleExport() {
    //   this.$refs.tree.insertAfter(
    //     { id: 333, name: "321321321", leaf: true },
    //     "point_107"
    //   );
    //   // this.currentNodeKey = "point_107";
    // },
    //
    dialogOpen() {
      //
    },
    //
    tableRowClassName({ row, rowIndex }) {
      return this.tableSelection &&
        this.tableSelection.point &&
        this.tableSelection.point.id === row.point.id
        ? "edit-row"
        : "";
    },
    tableRowStyle({ row, rowIndex }) {
      return "";
    },
    handleSelect(selection, row) {
      if (selection.length >= 1) {
        //
      }
    },
    handleSelectionChange(val) {
      if (val.length > 1) {
        let temp = val.pop();
        this.$refs.pointsTable.clearSelection();
        this.$refs.pointsTable.toggleRowSelection(temp);
        this.tableSelection = temp;
      } else {
        if (val.length === 1) {
          this.tableSelection = val[0];
        } else {
          this.tableSelection = null;
        }
      }
    },
    handleClick(row, column, event) {
      if (
        !this.tableSelection ||
        row.point.id != this.tableSelection.point.id
      ) {
        this.$refs.pointsTable.clearSelection();
        this.$refs.pointsTable.toggleRowSelection(row);
      } else {
        this.$refs.pointsTable.clearSelection();
      }
    },
    //
    handleSizeChange(val) {
      this.pointsQuery.size = val;
      this.setShowPointList();
    },
    //
    handleCurrentChange(val) {
      this.pointsQuery.page = val;
      this.setShowPointList();
    },
    //
    showMsgFromChild(data) {
      // // 巡检类型默认配置
      // this.getInspectTypeChoosesDefaultChecks();
      // 点位树
      this.getPointsTree();
    },
    getRobotParams(data) {
      robotParams(data)
        .then(response => {
          if (response.list && response.list.length > 0) {
            for (var i = 0, len = response.list.length; i < len; i++) {
              if (response.list[i].name === "ros_websocket_ip") {
                this.rosObj.ip = response.list[i].value;
              }
              if (response.list[i].name === "ros_websocket_port") {
                this.rosObj.port = response.list[i].value;
              }
            }
          }
        })
        .catch(() => {});
    },
    // 添加日志管理
    setOperationLogs(content) {
      var parm = {
        content: content,
        deviceId: localStorage.getItem("ydRobot_device_id"),
        type: 0
      };
      postOperationLogs(parm)
        .then(response => {})
        .catch(() => {});
    },
    // 树点击事件
    TreeItemCheck(tree, treeList, treeObj, currentNodeTree) {
      if (currentNodeTree.actived) {
        var currentLeafNodes = this.$refs.TreeList.vtl_getParentNodeLeafNodes(
          currentNodeTree
        );
        this.operatePointsList = [];
        for (let i = 0, len = this.pointsList.length; i < len; i++) {
          let item = this.pointsList[i];
          var isExit = false;
          for (let j = 0, t_len = currentLeafNodes.length; j < t_len; j++) {
            if (currentLeafNodes[j].id === item.point.id) {
              this.operatePointsList.push(item);
              currentLeafNodes.splice(j, 1);
              break;
            }
          }
        }
        this.paginationSet();
      } else {
        this.filterTree();
      }
    },
    treeDataChange(tree, list, obj) {
      this.filterTree();
    }
  }
};
</script>

<style>
.InspectionPointsSetting .filter .el-form-item {
  margin-top: 0;
  margin-bottom: 3px;
}
.InspectionPointsSetting .filter .el-form-item__label {
  font-size: 13px;
  line-height: 26px;
}
.InspectionPointsSetting .filter .el-form-item__content {
  font-size: 13px;
  line-height: 26px;
}
.InspectionPointsSetting .filter .el-radio__label {
  font-size: 13px;
}
.InspectionPointsSetting .filter .el-checkbox {
  font-size: 13px;
}
.InspectionPointsSetting .filter .el-checkbox__label {
  font-size: 13px;
  padding-left: 6px;
}
.InspectionPointsSetting .filter .el-radio {
  width: 210px;
  margin-left: 10px;
}
.InspectionPointsSetting .filter .el-radio + .el-radio {
  margin-left: 10px;
}
.InspectionPointsSetting .filter .el-checkbox {
  width: 210px;
  margin-left: 10px;
}
.InspectionPointsSetting .filter .el-checkbox + .el-checkbox {
  margin-left: 10px;
}
.InspectionPointsSetting .content-left .custom-tree-node span {
  font-size: 13px;
}
/*  */

.InspectionPointsSetting {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
}
.InspectionPointsSetting .filter {
  position: relative;
  width: 100%;
  /* height: 230px; */
  background-color: #eeeeee;
}
.InspectionPointsSetting .el_consist {
  width: calc(100% - 220px);
  float: left;
  overflow: hidden;
}
.InspectionPointsSetting .allCheckBox {
  float: left;
}
.InspectionPointsSetting .moreCheckBox {
  float: right;
}
.InspectionPointsSetting .operation {
  width: 100%;
  height: 30px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
  border-top: 1px solid rgb(202, 231, 238);
}
.InspectionPointsSetting .operation .el-form-item {
  margin-top: 0;
  margin-bottom: 0;
  float: left;
}
.InspectionPointsSetting .operation .el-form-item__content {
  width: 200px;
  margin-left: 5px !important;
}
.InspectionPointsSetting .yd-input {
  width: 200px;
  height: 30px;
  /* float: left; */
}
.InspectionPointsSetting .yd-input .el-input__inner {
  height: 29px;
  line-height: 27px;
  padding: 0 6px;
  border: 1px solid rgb(202, 231, 238);
}
.InspectionPointsSetting .but-query,
.InspectionPointsSetting .but-add,
.InspectionPointsSetting .but-modify,
.InspectionPointsSetting .but-remove,
.InspectionPointsSetting .but-enable,
.InspectionPointsSetting .but-disable,
.InspectionPointsSetting .but-reset,
.InspectionPointsSetting .but-export {
  height: 30px;
  margin-left: 20px;
  margin-right: 10px;
  padding: 0;
  font-size: 13px;
  color: #000;
  float: left;
}
.InspectionPointsSetting .query-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/query.png);
  background-size: 100% 100%;
  float: left;
}
.InspectionPointsSetting .add-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/add.png);
  background-size: 100% 100%;
  float: left;
}
.InspectionPointsSetting .modify-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/modify.png);
  background-size: 100% 100%;
  float: left;
}
.InspectionPointsSetting .remove-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/remove.png);
  background-size: 100% 100%;
  float: left;
}
.InspectionPointsSetting .enable-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/enable.png);
  background-size: 100% 100%;
  float: left;
}
.InspectionPointsSetting .disable-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/disable.png);
  background-size: 100% 100%;
  float: left;
}
.InspectionPointsSetting .reset-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/reset_a.png);
  background-size: 100% 100%;
  float: left;
}
.InspectionPointsSetting .export-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/export.png);
  background-size: 100% 100%;
  float: left;
}

.InspectionPointsSetting .content {
  width: 100%;
  min-height: 360px;
  flex-grow: 1;
}
.InspectionPointsSetting .content-left {
  position: relative;
  width: 300px;
  height: 100%;
  /* background-color: #eeeeee; */
  background-color: #fff;
  border-right: 1px solid rgb(202, 231, 238);
  float: left;
}
.InspectionPointsSetting .content-right {
  position: relative;
  /* width: 100%; */
  width: calc(100% - 300px);
  height: 100%;
  /* margin-left: 300px; */
  /* padding: 0 0 0 10px; */
  border-left: 1px solid rgb(202, 231, 238);
  float: left;
}
.InspectionPointsSetting .left-head {
  width: 100%;
  height: 27px;
  padding: 0 5px;
  line-height: 27px;
  font-size: 13px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
}
.InspectionPointsSetting .tree-list {
  position: absolute;
  width: 100%;
  height: calc(100% - 27px);
  overflow: auto;
}
.InspectionPointsSetting .right-head {
  width: 100%;
  height: 27px;
  padding: 0 5px;
  line-height: 27px;
  font-size: 13px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
}

.InspectionPointsSetting .content-list {
  position: absolute;
  width: 100%;
  height: calc(100% - 59px);
  /* overflow: auto; */
}

.InspectionPointsSetting .pagination-area {
  position: absolute;
  width: 100%;
  height: 32px;
  bottom: 0px;
  background-color: #eeeeee;
  /* position: fixed;
  right: 0px;
  bottom: 30px;
  background-color: #eeeeee;
  width: calc(100% - 301px);
  z-index: 1; */
}

.InspectionPointsSetting .el-table-redefine {
  width: 100%;
  height: 100%;
  /* display: flex;
  flex-flow: column; */
}

.InspectionPointsSetting .el-table-redefine .el-table__body-wrapper {
  /* overflow: hidden;
  overflow-y: auto;
  flex-grow: 1; */
}

.InspectionPointsSetting .el-table-redefine .edit-row {
  background: rgb(230, 250, 230) !important;
}

.InspectionPointsSetting .folder {
  width: 13px;
  height: 13px;
  margin-top: 2px;
  /* background-color: rgb(10, 158, 80); */
  background-image: url(../../../static/resources/images/folder.png);
  background-size: 100% 100%;
  float: left;
}
.InspectionPointsSetting .file {
  width: 13px;
  height: 13px;
  margin-top: 2px;
  /* background-color: rgb(255, 0, 0); */
  background-image: url(../../../static/resources/images/file.png);
  background-size: 100% 100%;
  float: left;
}

.InspectionPointsSetting .el-dialog-redefine {
  width: 60%;
  height: 60%;
  min-height: 360px;
}
.InspectionPointsSetting .el-dialog__header {
  padding: 0;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
}
.InspectionPointsSetting .el-dialog__header .el-dialog__title {
  line-height: 27px;
  font-size: 14px;
  color: #202123;
  padding: 0 6px;
}
.InspectionPointsSetting .el-dialog__header .el-dialog__headerbtn {
  width: 23px;
  height: 23px;
  top: 2px;
  right: 5px;
  font-size: 18px;
  border-radius: 3px;
  border: 1px solid rgb(177, 211, 162);
}
.InspectionPointsSetting .el-dialog__body {
  height: calc(100% - 27px);
  padding: 3px;
  background-color: rgb(227, 242, 238);
}
</style>